<template>
	<div class="my-card">
		<!-- 控件 -->
		<van-switch class="switch" v-model="card.checked" />
		<!-- 图片 -->
		<van-image class="images" fit="cover" :src="card.thumb_path" />
		<div class="main">
			<!-- 标题 -->
			<h2 class="title">{{ card.title }}</h2>
			<!-- 价格 -->
			<div class="bottom">
				<span class="price">￥{{ card.sell_price }}</span>
				<!-- 步进器 -->
				<van-stepper button-size="20px" v-model="card.count" theme="round" />
				<!-- 删除 -->
				<van-button type="default" size="small" @click="delCar">删除</van-button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		card: Object
	},
	methods: {
		delCar() {
			this.$toast.fail('删除还没做哦')
		}
	}
};
</script>

<style scoped lang="less">
.main {
	flex: 1;
	.title {
		font-size: 15px;
		color: #0088d1;
		line-height: 1.3;
		margin-bottom: 10px;
	}
	.price {
		color: red;
	}
	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
.my-card {
	display: flex;
	padding: 5px;
	justify-content: space-around;
	align-items: center;
	border-bottom: 1px solid #ccc;
	height: 95px;
	margin: 5px;
}
.images {
	width: 50px;
	height: 50px;
	margin: 0 5px;
}
.switch {
	width: 35px;
	font-size: 20px;
}
</style>
